<script lang="ts" setup>
const { bList } = defineProps(['bList'])
</script>

<template>
    <div class="brand-item">
        <img :src="bList.brandLogoUrl?bList.brandLogoUrl:bList.headUrl" alt="">
        <div class="brand-item-con">
            <div class="item-title">{{ bList.brandName?bList.brandName:bList.celebrityName }}</div>
            <div class="item-label">{{bList.brandName?"品牌":"艺人"}}</div>
        </div>
        <div class="brand-item-btn">去主页</div>
    </div>
</template>

<style lang="scss" scoped>
.brand-item{
    width: 100vw;
    height: 21vw;
    padding: 0 4vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;

    img{
        width: 56px;
        height: 56px;
        border: 1px solid rgba(0,0,0,.1);
        border-radius: 50%;
    }
    .brand-item-con{
        width: 50vw;

        .item-title{
            width: 50vw;
            color: #333333;
            font-size: 18px;
            font-weight: bold;
            line-height: 7vw;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .item-label{
            width: 8vw;
            height: 4vw;
            text-align: center;
            line-height: 4vw;
            font-size: 12px;
            color: #b5853a;
            background: #fff5df;
            border-radius: 1vw;
            margin-top: 1vw;
        }
    }

    .brand-item-btn{
        color: #f03d37;
        font-size: 14px;
        width: 20vw;
        height: 8vw;
        line-height: 8vw;
        text-align: center;
        background: #fef0ef;
        border-radius: 4vw;
    }
}
</style>